<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <title>Document</title>
</head>
<!--tree/start-->
<link href="css/jquery.treetable.min.css" rel="stylesheet">
<link href="css/jquery.treetable.theme.default.css" rel="stylesheet">

<!--tree/end-->
<style>
    html {
        overflow: hidden;
    }

    html,
    body,
    .med-page {
        height: 100%;
    }

    .med-row>span {
        display: inline-block;
        width: 180px;
        text-align: center;
    }

    .med-btn {
        border: 0 none;
        background-color: #39f;
        border-radius: 4px;
        color: #fff;
        padding: 8px 10px;
        min-width: 60px;
    }

    .med-section {
        border-top: 2px solid #39f;
        padding-top: 30px;
        background: #fff;
        padding-left: 10px;
        padding-right: 10px;

    }

    .med-page_title {
        margin: 15px 0;
        font-size: 18px;
    }

    /* 面包屑 */
    .med-mbx {
        font-size: 14px;
        text-align: right;
        width: 400px;
    }

    .med-mbx a:not(:last-of-type)::after {
        font-size: 12px;
        line-height: 1.2;
        content: ">"

    }

    /* seacrch */
    .med-table-search {
        padding-left: 15px;
        padding-right: 15px;

    }

    .med-table-search_item {
        margin-bottom: 15px;
    }

    .table>thead>tr>th,
    .table>tbody>tr>td {
        text-align: center;
        vertical-align: middle
    }

    .table td span {
        min-width: 60px;
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .med-table_footer {
        line-height: 35px;
    }

    .container-table {
        position: relative;
    }

    .container-table_head {
        position: absolute;
        top: 0;
        left: 0;
        overflow: hidden;
    }

    .container-table_content {
        height: 100%;
        overflow: auto;
    }

    /* 分页 */
    .pagination {
        margin: 0;
    }

    .pagination a {
        cursor: pointer;
    }

    .pagination .active {
        color: #333;
        pointer-events: none;
    }

    .table-click {
        color: #39f;
        cursor: pointer;
    }

    .med-model {
        display: none;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

    .med-model_content {
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        margin: auto;
        width: 800px;
        min-height: 600px;
        padding: 15px;
        background: #fff;
        box-shadow: 0 0 2px 5px rgba(0, 0, 0, .1)
    }

    /* // tree */
    .med-table thead,
    .med-table.treetable thead {
        background: #f1f1f1;
    }

    .collapsed.leaf {
        display: none !important;
    }

    .med-table.treetable thead tr th,
    .med-table.treetable {

        border-color: #ccc;
    }

    table.treetable tr.branch {
        background: none;
    }

    .med-table.treetable thead tr th {
        height: 32px;
    }

    .med-table.treetable tbody tr td {
        padding: 8px;
        border-top: 1px solid #ccc;
        border-right: 1px solid #ccc;
    }



    .med-table.treetable thead tr th,
    .med-table td:not(:first-of-type) {
        text-align: center;
    }
</style>

<body>
    <div class="med-page">
        <h1 class="med-page_title">
            分析表格
            <nav class="med-mbx pull-right">
                <a>
                    1111
                </a>
                <a>
                    1111
                </a>
                <a>
                    1111
                </a>
            </nav>
        </h1>
        <div class="med-section">
            <!-- search -->
            <section class="med-table-search">
                <div class="row ">
                    <div class="col-xs-3 med-table-search_item">
                        <select class="form-control" data-id="area">
                            <option value="">片区</option>
                        </select>
                    </div>
                    <div class="col-xs-3 med-table-search_item">
                        <select class="form-control">
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                        </select>
                    </div>
                    <div class="col-xs-3 med-table-search_item">

                        <select class="form-control">
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                        </select>
                    </div>
                    <div class="col-xs-3 med-table-search_item">

                        <select class="form-control">
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                        </select>
                    </div>
                    <div class="col-xs-3 med-table-search_item">

                        <select class="form-control">
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                        </select>
                    </div>

                </div>
            </section>
            <!-- search end-->
            <section class="container-table">
                <div class="container-table_head"></div>
                <div class="container-table_content">
                    <table id="main" class="med-table table table-bordered table-responsive">
                        <thead>
                            <tr>
                                <th>
                                    序号
                                </th>
                                <th>
                                    品种名称
                                </th>
                                <th>
                                    剂型
                                </th>
                                <th>
                                    规格
                                </th>
                                <th>
                                    主规格
                                </th>
                                <th>
                                    2018年规格下采购数量（片/袋/支）
                                </th>
                                <th>
                                    2018年通用名下采购数量（片/袋/支）
                                </th>
                                <th>
                                    2018年规格下采购数量（片/袋/支）
                                </th>
                                <th>
                                    2018年通用名下采购数量（片/袋/支）
                                </th>
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
                <!-- <div class="med-table_footer">
                    共<span rel='total'>0</span>条数据
                    <ul class="pagination pull-right">
                        <li><a rel="prev">&laquo;</a></li>
                        <li><a rel="next">&raquo;</a></li>
                    </ul>
                </div> -->

            </section>

        </div>
    </div>
    <div class="med-model">
        <div class="med-model_content">

            <div class="med-row">
                <span>
                    品种名称：<span rel='model_name'>品种名称</span>
                </span>
                <span>
                    剂型：<span rel='model_jx'>剂型</span>
                </span>
                <span>
                    规格：<span rel='model_size'>规格</span>
                </span>
            </div>
            <div class="med-row text-right">
                <button class="med-btn" id="back">返回</button>
            </div>
            <div id="med-container-table">

            </div>

        </div>
    </div>

    <script src="js/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.treetable.min.js"></script>

    <script>
        $(function () {
            // 主表格容器
            var $containerMain = $(".container-table");
            var $tableHead = $('.container-table_head');

            // 主表格
            var $main = $("#main");
            var $searchItem = $("[data-id]");
            // 当前页面
            var pageIndex = 1;
            // 总页数
            var pageTotal = 0;
            var $next = $("[rel=next]");
            var $prev = $("[rel=prev]");
            // 对话框
            var $model = $('.med-model');
            var $table = ""


            initSearch()
            getParams();

            $searchItem.on("change", getParams)

            $next.on("click", function () {
                pageIndex++
                initList();
            })

            $prev.on("click", function () {
                pageIndex--
                initList();
            })

            $("#back").on('click', function () {
                $model.fadeOut();
            })


            /**
             * 初始化 search
            **/
            function initSearch() {

                $.get("#", {}, function (res) {
                    if (!res) return;
                    // 假数据
                    var data = {
                        area: [
                            {
                                name: '石家庄',
                                id: 111
                            },
                            {
                                name: '邯郸',
                                id: 112
                            }
                        ]
                    };

                    // 片区
                    var areas = "";
                    $.each(data.area, function (i, item) {
                        areas += "<option value='" + item.id + "'>" + item.name + "</option>"
                    })
                    $("[data-id=area]").append(areas)




                })

            }
            /**
             * 获取搜索的内容
            */
            function getParams() {
                var params = {};
                $searchItem.each(function () {
                    var $o = $(this)
                    var name = $o.data("id");
                    params[name] = $o.val();
                })
                initList(params)
            }
            /**
             *  分页处理
            **/
            function setPage() {
                if (pageIndex === pageTotal) {
                    $next.addClass("active")
                    $prev.removeClass("active")
                } else if (pageIndex === 1) {
                    $next.removeClass("active")
                    $prev.addClass("active")
                } else {
                    $next.removeClass("active")
                    $prev.removeClass("active")
                }
            }
            /**
             * init list
            */
            function initList(params) {
                $.extend(params, {
                    // 添加其他参数
                    pageIndex: pageIndex
                })
                setPage();
                $.get("#", params, function (res) {
                    if (!res) return;
                    pageTotal = 6;
                    var total = 11;
                    // 数据逻辑    
                    var data = [
                        {
                            name: '名称1',//名称
                            name_merge: 2,
                            jx: '剂型11',
                            jx_merge: 2,
                            size: '规格1',
                            zhugg: '主规格1',
                            zhugg_merge: 2,
                            '2018gg': '2018规格',
                            '2018tym': '2018通用名',
                            '2018tym_merge': 2,
                            '2019gg': '2019预计采购量',
                            '2019tym': '2019通用名预计采购量',
                            '2019tym_merge': 2,
                        },
                        {
                            name: '名称2',//名称
                            name_merge: 0,
                            jx: '剂型11',
                            jx_merge: 0,
                            size: '规格1',
                            zhugg: '主规格1',
                            zhugg_merge: 0,
                            '2018gg': '2018规格',
                            '2018tym': '2018通用名',
                            '2018tym_merge': 0,
                            '2019gg': '2019预计采购量',
                            '2019tym': '2019通用名预计采购量',
                            '2019tym_merge': 0,
                        },
                        {
                            name: '独立行',//名称
                            jx: '剂型11',
                            size: '规格1',
                            zhugg: '主规格1',
                            '2018gg': '2018规格',
                            '2018tym': '2018通用名',
                            '2019gg': '2019预计采购量',
                            '2019tym': '2019通用名预计采购量',
                        },
                        {

                            name: '名称3',//名称
                            name_merge: 3,
                            jx: '剂型11',
                            jx_merge: 3,
                            size: '规格1',
                            zhugg: '主规格1',
                            zhugg_merge: 3,
                            '2018gg': '2018规格',
                            '2018tym': '2018通用名',
                            '2018tym_merge': 3,
                            '2019gg': '2019预计采购量',
                            '2019tym': '2019通用名预计采购量',
                            '2019tym_merge': 3

                        },
                        {

                            name: '名称3',//名称
                            name_merge: 0,
                            jx: '剂型11',
                            jx_merge: 0,
                            size: '规格1',
                            zhugg: '主规格1',
                            zhugg_merge: 0,
                            '2018gg': '2018规格',
                            '2018tym': '2018通用名',
                            '2018tym_merge': 0,
                            '2019gg': '2019预计采购量',
                            '2019tym': '2019通用名预计采购量',
                            '2019tym_merge': 0

                        },
                        {

                            name: '名称3',//名称
                            name_merge: 0,
                            jx: '剂型11',
                            jx_merge: 0,
                            size: '规格1',
                            zhugg: '主规格1',
                            zhugg_merge: 0,
                            '2018gg': '2018规格',
                            '2018tym': '2018通用名',
                            '2018tym_merge': 0,
                            '2019gg': '2019预计采购量',
                            '2019tym': '2019通用名预计采购量',
                            '2019tym_merge': 0

                        },
                    ];


                    // data = [...data,...data,...data,...data]
                    // 业务逻辑    
                    var html = createListTr(data)
                    $main.find("tbody").html(html)
                    // init fixed head
                    initHead();
                    // 弹出窗
                    $(".table-click").on("click", function () {
                        var index = $(this).parent().index();
                        var row = data[index];
                        $model.fadeIn();
                        initModel(row)
                    })
                    $("[rel=total]").text(total);
                    // 初始化 分页
                    $("[rel=page]").parent().remove();
                    var page = ''
                    for (var i = 0; i < pageTotal; i++) {
                        let num = Number(i + 1);
                        page += '<li><a rel="page" class="' + (num === pageIndex ? "active" : '') + '" >' + num + '</a></li>'

                    }
                    $("[rel=next]").parent().before(page)
                    $("[rel=page]").on("click", function () {
                        var index = Number($(this).html());
                        pageIndex = index;
                        initList()
                    })

                })

            }
            $(window).on('resize', initHead)
            // 初始固定表格
            function initHead() {
                var winh = $("body").height();
                var top = $containerMain[0].getBoundingClientRect().top
                $containerMain.height(winh - top);
                var $tableContent = $containerMain.find(".container-table_content")
                var tableCopy = $tableContent.html();
                // 获得可视区域的宽度 
                var tableContentWidth = $tableContent[0].clientWidth
                var theadHeight = $main.find("thead").height();
                $tableHead.html(tableCopy).height(theadHeight).width(tableContentWidth)
            }

            /**
            * 创建合并表格
            */
            function createListTd(key, data, option) {
                var space = "_merge";
                var span = data[key + space];
                var options = option || {};
                return "<td class='" + options.className + "' rowspan='" + span + "'  style='width:" + (options.width ? options.width : '') + " ;display:" + (span === 0 ? 'none' : '') + "' ><span>" + data[key] + "</span></td>"
            }
            // 生成html tr
            function createListTr(data) {
                var html = '';

                $.each(data, function (i, item) {
                    html += "<tr data-id='" + item.id + "'>"
                        + " <td>" + Number(i + 1) + "</td>"
                        // 名称
                        + createListTd('name', item)
                        // 剂型
                        + createListTd('jx', item)
                        // 规格
                        + createListTd('size', item)
                        // 主规格
                        + createListTd('zhugg', item)
                        // 2018规格
                        + createListTd('2018gg', item, {
                            width: '160px',
                            className: "table-click"
                        })
                        // 2018通用名
                        + createListTd('2018tym', item, {
                            width: '160px',
                            className: "table-click"
                        })
                        // 2019规格
                        + createListTd('2019gg', item, {
                            width: '160px',
                            className: "table-click"
                        })
                        // 2019规格
                        + createListTd('2019tym', item, {
                            width: '160px',
                            className: "table-click"
                        })

                        + "</tr>"

                })

                return html
            }


            // 模拟
            function initModel(row) {
                var table = '<table id="basic-expandable" class="med-table" >'
                    + '<thead><tr>'
                    + '         <th style="width:150px"> 机构 </th>'
                    + '         <th> 2018年通用</th>'
                    + '       <th> 2019年通用 </th>'
                    + '     </tr> </thead><tbody></tbody>'
                    + ' </table>';

                $("#med-container-table").html(table);
                $table = $("#basic-expandable");

                $("[rel=model_name]").text(row.name)
                $("[rel=model_js]").text(row.jx)
                $("[rel=model_size]").text(row.size)

                $.get("#", function (res) {
                    if (!res) return;
                    var data = [
                        {
                            name: '省属',
                            val1: 1000,
                            val2: 1000,
                            id: '0'
                        },
                        {
                            name: '石家庄',
                            val1: 1000,
                            val2: 1000,
                            id: '2'
                        },
                        {
                            name: '石家庄2',
                            val1: 1000,
                            val2: 1000,
                            id: '3'
                        }
                    ]
                    var html = createTr(data);
                    $table.find("tbody").html(html)
                    $table.show();
                    initTable();
                })
            }
            // init table

            function initTable() {
                $table.treetable({
                    expandable: true,
                    onNodeExpand(a, b) {
                        var tr = this;
                        var id = tr.id
                        var loadNode = $table.treetable('node', id + "-0");
                        if (loadNode) loadRows(id, tr, id + "-0")
                    }
                });
            }
            // load data
            function loadRows(id, dom, loadId) {
                $.get("#", {
                    id: id
                }, function (res) {
                    if (!res) return;
                    var data = [
                        {
                            name: '区',
                            val1: 1000,
                            val2: 1000,
                            id: new Date().getTime()
                        },];
                    var rows = createTr(data, id);
                    $table.treetable('loadBranch', dom, rows)
                    // 删除加载用节点
                    $table.treetable('removeNode', loadId)

                })
            }
            // create tr
            function createTr(data, pid) {
                var html = '';
                // 是否存在父级
                var str = pid !== '' ? 'data-tt-parent-id="' + pid + '"' : '';
                $.each(data, function (i, item) {
                    html += '<tr data-tt-id="' + item.id + '" ' + str + ' >'
                        + ' <td>' + item.name + '</td>'
                        + ' <td>' + item.val1 + '</td>'
                        + ' <td>' + item.val2 + '</td>'
                        + ' </tr>';
                    html += '<tr data-tt-id="' + item.id + '-0" data-tt-parent-id="' + item.id + '" class="collapsed" style="display:none">'
                        + ' <td colspan="3" >加载中...</td>'
                        + ' </tr>'

                })
                return html
            }


        })
    </script>

</body>

</html>